<script setup>
import { ref } from 'vue'
import Pagination from '@/components/Pagination/Pagination.vue'

// 示例 1: 基本使用
const currentPage1 = ref(1)
const totalItems1 = ref(100)

const handlePageChange1 = (newPage) => {
  console.log('Basic usage - Current page changed to:', newPage)
  currentPage1.value = newPage
}

// 示例 2: 完整布局
const currentPage2 = ref(1)
const totalItems2 = ref(500)

// 示例 3: 自定义文本
const currentPage3 = ref(1)

// 示例 4: 禁用状态
const currentPage4 = ref(2)

// 示例 5: 自定义每页条数
const currentPage5 = ref(1)
const pageSize5 = ref(10)
const totalItems5 = ref(200)

const handleSizeChange5 = (newSize) => {
  console.log('Custom page size changed to:', newSize)
  pageSize5.value = newSize
}
</script>

<template>
  <div>
    <!-- 基本使用 -->
    <h2>1. 基本使用</h2>
    <Pagination
      :current-page="currentPage1"
      :total="totalItems1"
      @change="handlePageChange1"
    />

    <!-- 完整布局 -->
    <h2>2. 完整布局</h2>
    <Pagination
      v-model:current-page="currentPage2"
      :total="totalItems2"
      layout="first, prev, pager, next, last, sizes"
      :pager-count="7"
    />

    <!-- 自定义文本 -->
    <h2>3. 自定义文本</h2>
    <Pagination
      :current-page="currentPage3"
      :total="1000"
      :prev-text="'‹'"
      :next-text="'›'"
      :first-text="'«'"
      :last-text="'»'"
    />

    <!-- 禁用状态 -->
    <h2>4. 禁用状态</h2>
    <Pagination
      :current-page="currentPage4"
      :total="50"
      :disabled="true"
    />

    <!-- 自定义每页条数 -->
    <h2>5. 自定义每页条数</h2>
    <Pagination
      v-model:current-page="currentPage5"
      v-model:page-size="pageSize5"
      :total="totalItems5"
      layout="sizes, prev, pager, next"
      @size-change="handleSizeChange5"
    />
  </div>
</template>

<style scoped>
h2 {
  margin-top: 20px;
}
</style>